<template>
  <view class="advantage-edit-container">
    <!-- 页头 -->
    <view class="header">
      <view class="header-content">
        <view class="back-btn" @click="goBack">
          <image class="back-icon" src="/static/icons/candidate/pre_page.png"></image>
        </view>
                 <view class="header-right">
           <text class="save-btn" @click="handleSaveAdvantage">保存</text>
         </view>
      </view>
    </view>

    <!-- 页面内容 -->
    <view class="content">
      <!-- 标题和提示 -->
      <view class="title-section">
        <text class="main-title">我的优势</text>
        <text class="subtitle">丰富的个人优势介绍，更能赢得BOSS青睐</text>
      </view>

             <!-- 富文本编辑器 -->
       <view class="editor-container">
         <editor 
           id="editor" 
           class="ql-container" 
           placeholder="请输入您的个人优势..." 
           show-img-size 
           show-img-toolbar 
           show-img-resize 
           @statuschange="onStatusChange" 
           @ready="onEditorReady"
           @input="onInput"
         ></editor>
         
                   <!-- 字数统计 -->
          <view class="stats-container">
            <view class="word-count">
              <text class="word-count-text">字数: {{ currentWordCount }}/1000</text>
            </view>
          </view>
       </view>
    </view>

    <!-- 底部工具栏 -->
    <view class="toolbar">
      <view class="toolbar-container">
                 <!-- 有序列表 -->
         <view class="tool-item" @click="insertOrderedList">
           <image class="tool-icon" src="/static/icons/candidate/orderlist.png"></image>
         </view>
         
         <!-- 无序列表 -->
         <view class="tool-item" @click="insertUnorderedList">
           <image class="tool-icon" src="/static/icons/candidate/unorderlist.png"></image>
         </view>
        
        
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { saveAdvantage } from '../../../api/resume.js'

// 编辑器实例
let editorCtx = null

// 编辑器格式状态
const formats = reactive({})

// 当前字数统计
const currentWordCount = ref(0)

// 获取页面参数
const getPageParams = () => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options || {}
  
  console.log('页面参数:', options)
  
  const params = {
    advantage: decodeURIComponent(options.advantage || ''),
    advantageHtml: decodeURIComponent(options.advantageHtml || '')
  }
  
  console.log('解析后的参数:', params)
  
  return params
}



// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 保存个人优势
const handleSaveAdvantage = () => {
  if (editorCtx) {
    editorCtx.getContents({
      success: (res) => {
        console.log('保存个人优势:', res.html)
        
        // 验证字数限制
        const textLength = getTextLength(res.html)
        if (textLength > 1000) {
          uni.showToast({
            title: '字数不能超过1000字',
            icon: 'none'
          })
          return
        }
        console.log("保存的数据",res);
        
        // 调用后端接口保存数据
        const advantageData = {
          advantage: res.text, // 提取纯文本内容
          advantageHtml: res.html // HTML格式内容
        }
        
        saveAdvantage(advantageData).then(response => {
          console.log('保存成功:', response)
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          
          // 延迟返回上一页，确保用户看到成功提示
          setTimeout(() => {
            // 使用 reLaunch 重新加载简历页面，确保数据刷新
            uni.reLaunch({
              url: '/pages/candidate/resume/resume',
              success: () => {
                console.log('重新加载简历页面成功')
              },
              fail: (err) => {
                console.log('重新加载简历页面失败:', err)
              }
            })
          }, 1500)
        }).catch(error => {
          console.log('保存失败:', error)
          uni.showToast({
            title: '保存失败',
            icon: 'none'
          })
        })
      },
      fail: (err) => {
        console.log('获取内容失败:', err)
        uni.showToast({
          title: '获取内容失败',
          icon: 'none'
        })
      }
    })
  }
}

// 编辑器准备就绪
const onEditorReady = () => {
  console.log('编辑器准备就绪')
  uni.createSelectorQuery().select('#editor').context((res) => {
    console.log('获取编辑器上下文:', res)
    editorCtx = res.context
    
    // 设置初始内容
    if (editorCtx) {
      const params = getPageParams()
      let initialHtml = ''
      
      // 如果有已有的HTML内容，优先使用HTML内容
      if (params.advantageHtml) {
        initialHtml = params.advantageHtml
      } else if (params.advantage) {
        // 如果没有HTML内容，但有纯文本内容，则使用纯文本
        initialHtml = params.advantage
      } else {
        // 如果都没有，使用默认内容
        initialHtml = '具备扎实的Java后端开发经验，熟悉Spring生态框架。\n\n• 熟练掌握Java核心技术\n• 具备良好的代码规范\n• 有团队协作经验'
      }
      
      editorCtx.setContents({
        html: initialHtml
      })
      
      // 设置初始字数统计
      currentWordCount.value = getTextLength(initialHtml)
    }
  }).exec()
}

// 编辑器状态变化
const onStatusChange = (e) => {
  console.log('编辑器状态变化:', e.detail)
  Object.assign(formats, e.detail)
}

// 编辑器输入
const onInput = (e) => {
  console.log('编辑器输入:', e.detail)
  
  // 计算纯文本字数
  const textLength = getTextLength(e.detail.html)
  console.log('当前字数:', textLength)
  
  // 更新字数统计
  currentWordCount.value = textLength
  
  // 如果字数超过1000，阻止继续输入
  if (textLength > 1000) {
    uni.showToast({
      title: '字数不能超过1000字',
      icon: 'none'
    })
    
    // 截断内容到1000字
    if (editorCtx) {
      const truncatedHtml = truncateHtml(e.detail.html, 1000)
      editorCtx.setContents({
        html: truncatedHtml
      })
              // 更新字数统计为1000
        currentWordCount.value = 1000
    }
  }
}

// 计算纯文本字数（不包括HTML标签）
const getTextLength = (html) => {
  if (!html) return 0
  
  // 移除HTML标签获取纯文本
  return html.replace(/<[^>]*>/g, '').length
}

// 截断HTML内容到指定字数
const truncateHtml = (html, maxLength) => {
  if (!html) return ''
  
  // 移除HTML标签获取纯文本
  const text = html.replace(/<[^>]*>/g, '')
  
  if (text.length <= maxLength) return html
  
  // 截断纯文本
  const truncatedText = text.substring(0, maxLength)
  
  // 尝试保持HTML结构，但这是简化处理
  // 实际项目中可能需要更复杂的HTML解析
  return truncatedText
}







// 插入有序列表
const insertOrderedList = () => {
  console.log('插入有序列表, editorCtx:', editorCtx)
  if (editorCtx) {
    console.log('设置有序列表')
    editorCtx.format('list', 'ordered')
  } else {
    console.log('编辑器实例未准备好')
  }
}

// 插入无序列表
const insertUnorderedList = () => {
  console.log('插入无序列表, editorCtx:', editorCtx)
  if (editorCtx) {
    console.log('设置无序列表')
    editorCtx.format('list', 'bullet')
  } else {
    console.log('编辑器实例未准备好')
  }
}




</script>

<style scoped lang="less">
.advantage-edit-container {
  background-color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 页头样式 */
.header {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  height: 88rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #00bdb4;
  
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.save-btn {
  font-size: 32rpx;
  color: #00bdb4;
  font-weight: 500;
  cursor: pointer;
}

/* 页面内容 */
.content {
  padding: 40rpx 30rpx;
  padding-bottom: 100rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 标题区域 */
.title-section {
  text-align: left;
  margin-bottom: 40rpx;
}

.main-title {
  display: block;
  font-size: 48rpx;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 20rpx;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 编辑器容器 */
.editor-container {
  flex: 1;
  width: 100%;
}

/* 富文本编辑器样式 */
.ql-container {
  width: 100%;
  height: 100%;
  min-height: 600rpx;
  font-size: 32rpx;
  line-height: 1.6;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 统计容器样式 */
.stats-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20rpx 0;
  border-top: 1rpx solid #f0f0f0;
  margin-top: 20rpx;
}

/* 字数统计样式 */
.word-count {
  display: flex;
  align-items: center;
}

.word-count-text {
  font-size: 24rpx;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 底部工具栏 */
.toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 1rpx solid #f0f0f0;
  padding: 25rpx 30rpx;
  z-index: 100;
}

.toolbar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40rpx;
}

.tool-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70rpx;
  height: 70rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.tool-item:active {
  background-color: #e9ecef;
  transform: scale(0.95);
}



.tool-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>
